<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file, 111);
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
/*设置外部div*/
#outer {
  width: 447px;
  height: 240px;
  margin: 50px auto; /*居中*/
  background-color: #0ff; /*设置背景颜色*/
  padding: 10px 0;
  position: relative; /*父元素div开启相对定位*/
  overflow: hidden; /*裁剪溢出内容*/
}
/*设置ul*/
#imgList {
  list-style: none; /*去除项目符合*/
  position: absolute; /*给ul开启绝对定位*/
  left: 0px; /*设置偏移量，每向左移动447px就会显示下一张图片*/
}
/*设置图片中的li*/
#imgList li {
  float: left; /*设置浮动*/
  margin: 0 10px; /*设置左右外边距*/
}
/*设置导航按钮*/
#navdiv {
  position: absolute; /*开启绝对定位*/
  bottom: 15px; /*设置位置*/
}
#navdiv a {
  float: left; /*设置超链接浮动*/
  width: 15px;
  height: 15px;
  background-color: #f00; /*设置背景颜色*/
  margin: 0 5px; /*设置左右外边距*/
  opacity: 0.5; /*设置半透明*/
  /*兼容IE8透明的写法为，filter:alpha(opacity=50)*/
}
/*设置鼠标移入的效果*/
#navdiv a:hover {
  background-color: #000;
}
</style>